<template>
  <div>
    <el-row type="flex" justify="space-between">
      <el-col class="hidden-sm-and-down" :md="3">
        <el-divider content-position="left">技术频道</el-divider>
        <el-menu default-active="$router.path"
                 active-text-color="#ffffff"
                 router
        >
          <el-menu-item index="/0">
            推荐
          </el-menu-item>
          <el-menu-item v-for="item in categoryList" :key="item.id" :index="'/'+item.id" >
            {{item.name}}({{item.articleCount}})
          </el-menu-item>
        </el-menu>
      </el-col>
      <el-col :md="16">
        <div class="blog-center">
          <div class="block">
            <div class="banner">
              <el-carousel height="230px">
                <el-carousel-item v-for="item in mainAdverList" :key="item.id">
                  <a :href="item.abvertUrl" :target="item.advertTarget">
                    <img :src="item.imageUrl"></img>
                  </a>
                </el-carousel-item>
              </el-carousel>
            </div>
          </div>
        </div>
        <!--文章列表-->
        <nuxt-child ></nuxt-child>
      </el-col>
      <el-col class="hidden-sm-and-down" :md="5">
        <el-card shadow="hover" class="right-card">
          <p>文章推荐</p>
          <el-carousel height="210px">
            <el-carousel-item v-for="item in hotAdverList" :key="item.id">
              <a :href="item.abvertUrl" :target="item.advertTarget">
                <img :src="item.imageUrl"></img>
                <span>最热门推荐</span>
              </a>
            </el-carousel-item>
          </el-carousel>
        </el-card>
      </el-col>

    </el-row>
  </div>

</template>
<script>
  export default {
    async asyncData({app, $axios, response}) {
      //查询技术频道
      const {data: categoryList} = await app.$getCategoryList();
      // const resp =await $axios.$get(`http://1.15.92.186:7001/blog/article/api/category/list`);
      //console.log('categoryList',categoryList)
      //console.log('resp',resp)
      //查询滚动图广告
      const {data: mainAdverList} = await app.$getAdverList(1);
      //查询右侧推荐
      const {data: hotAdverList} = await app.$getAdverList(2);

      return {categoryList, mainAdverList, hotAdverList}
    }

  }


</script>
<style scoped>
  /*局部引入 外部的样式文件*/
  @import "@/assets/css/blog/index.css";
</style>
